<template>
  <div>
    <div class="referral-info">
      <div class="total">
        <div class="lab">{{ $t('累计邀请注册奖励') }}</div>
        <div class="val">{{ info.total_invite_rewards }} {{ info.coin_symbol }}</div>
      </div>
      <div class="items">
        <div class="item">
          <div class="val">{{ info.level_1_num }}</div>
          <div class="lab">{{ $t('一级邀请人数') }}</div>
        </div>
        <div class="item">
          <div class="val">{{ info.level_2_num }}</div>
          <div class="lab">{{ $t('二级邀请人数') }}</div>
        </div>
        <div class="item">
          <div class="val">{{ info.level_3_num }}</div>
          <div class="lab">{{ $t('三级邀请人数') }}</div>
        </div>
      </div>
      <div class="items">
        <div class="item">
          <div class="val">{{ info.invite_rewards }} {{ info.coin_symbol }}</div>
          <div class="lab">{{ $t('总邀请奖励') }}</div>
        </div>
        <div class="item">
          <div class="val">{{ info.frozen_rewards }} {{ info.coin_symbol }}</div>
          <div class="lab">{{ $t('已解冻奖励') }}</div>
        </div>
        <div class="item">
          <div class="val">{{ info.freeze_rewards }} {{ info.coin_symbol }}</div>
          <div class="lab">{{ $t('冻结中奖励') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      info: ''
    }
  },
  beforeMount () {
    this.getReferralReward()
      .then((data) => {
        this.info = data.data
      })
  },
  methods: {
    ...mapActions({
      getReferralReward: 'user/getReferralReward'
    })
  }
}
</script>
<style scoped>
.referral-info {
  margin: 15px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgb(66, 65, 65);
  text-align: center;
}
.referral-info .total {
  padding: 20px;
}
.referral-info .total .lab,
.referral-info .total .val {
  color: rgb(208, 209, 128);
  font-size: 16px;
}
.referral-info .total .val {
  font-weight: bold;
}
.referral-info .items {
  border-top: 1px solid rgba(255, 255, 255, .5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
.referral-info .item {
  flex: 1 0 0;
}
.referral-info .item .val {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}
.referral-info .item .lab {
  font-size: 14px;
  color: #fff;
  margin-top: 5px;
}
</style>
